<template>
    <div class="worknum">
        <div class="zhuhuall">
            <div class="icon">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u4852.svg"
                    alt="">
            </div>
            <div>
                <div style="color: #999;font-size: 13px;margin-bottom: 10px">住户总数量</div>
                <div>
                    <el-statistic :value="outputValue" />
                </div>
            </div>
        </div>
        <div class="zhuhuall">
            <div class="icon" style="background-color: #7262fd;">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u4859.svg"
                    alt="">
            </div>
            <div>
                <div style="color: #999;font-size: 13px;margin-bottom: 10px">房屋总数量</div>
                <div>
                    <el-statistic :value="outputValue1" />
                </div>
            </div>
        </div>
        <div class="zhuhuall">
            <div class="icon" style="background-color: #ffaa00;">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u4866.svg"
                    alt="">
            </div>
            <div>
                <div style="color: #999;font-size: 13px;margin-bottom: 10px">车位总数量</div>
                <div>
                    <el-statistic :value="outputValue2" />
                </div>
            </div>
        </div>
        <div class="zhuhuall">
            <div class="icon" style="background-color: #52c41a;">
                <img src="https://cdn7.axureshop.com/demo2024/2033334/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u4873.svg"
                    alt="">
            </div>
            <div>
                <div style="color: #999;font-size: 13px;margin-bottom: 10px">设备总数量</div>
                <div>
                    <el-statistic :value="outputValue3" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useHomeStore } from '@/stores/HomeStore'
import { ref, watchEffect, onMounted } from 'vue'
import { useTransition } from '@vueuse/core'
import { storeToRefs } from 'pinia';
const homeStore = useHomeStore()
const { worknum } = storeToRefs(homeStore)
const { getworknums } = homeStore
getworknums()
const residents: any = ref(0)
const housing: any = ref(0)
const carall: any = ref(0)
const equipment: any = ref(0)
const outputValue = useTransition(residents, {
    duration: 1000,
})
const outputValue1 = useTransition(housing, {
    duration: 1000,
})
const outputValue2 = useTransition(carall, {
    duration: 1000,
})
const outputValue3 = useTransition(equipment, {
    duration: 1000,
})
watchEffect(() => {
    if (worknum.value.residents) {
        residents.value = worknum.value.residents
        housing.value = worknum.value.housing
        carall.value = worknum.value.carall
        equipment.value = worknum.value.equipment
    } else {
        residents.value = 0
        housing.value = 0
        carall.value = 0
        equipment.value = 0
    }
})
</script>

<style scoped>
@import url('@/assets/Home/Home.css');
</style>